<template>
  <div class="con">
    <div class="contbox6_10">
      <!-- <p class="titlelist6_10">
        机构管理
        <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>机构业务
      </p> -->
    </div>
    <div class="content" style="margin-top: 0 !important">
      <!-- <div class="sousuojg6_10 nav" v-if="loginName == 'admin'" >
        <div class="nav_son">
          <span>机构ID：{{ form.officeUid }}</span>
          <span>机构名称：{{ form.officeName }}</span>
          <span>上级机构：{{ form.parentName }}</span>
        </div>
      </div> -->
      <div class="buttons">
        <el-button type="primary" class="kaitong" plain @click="opening">
          <i class="el-icon-plus"></i> 添加提现方式</el-button
        >
      </div>
      <div class="tables">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column label="提现方式" min-width="200px">
            <template slot-scope="scope">
              <div v-if="scope.row.drawType == 1">海科代付</div>
              <div v-if="scope.row.drawType == 2">厦门国际分账</div>
              <div v-if="scope.row.drawType == 3">支付宝</div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="false"
            prop="channelName"
            label="名称"
            min-width="200px"
          ></el-table-column>
          <el-table-column
            prop="createDate"
            label="添加时间"
            min-width="200px"
          ></el-table-column>
          <el-table-column label="当前状态" min-width="200px">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.isFlag == 1">停用</span>
                <span v-if="scope.row.isFlag == 0">启用</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handleEdit(scope.row, 1024)"
                >查看</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="handleEdit(scope.row, 2049)"
                >修改</el-button
              >
              <!-- <el-button type="text"> 停用 </el-button> -->
              <!-- <el-button size="mini" @click="shangyips(2,scope.row.uid,scope.row.agtType)">权益记录</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-button
          @click="back"
          class="filter-container"
          style="
            margin-left: 20px;
            float: left;
            text-align: left;
            font-size: 16px;
            color: rgb(31, 165, 243);
            cursor: pointer;
            width: auto;
          "
        >
          返回
        </el-button>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
    >
      <div class="lister">
        <!-- 厦门分账 2  支付宝 3 -->
        <div class="listTitle">提现方式</div>
        <div class="listCont">
          <el-select
            v-model="datas.drawType"
            :disabled="catBool"
            placeholder="请选择"
            class="withdrawal"
          >
            <el-option
              v-for="item in dataOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div v-if="datas.drawType != 1">
        <div class="listBox">
          <div class="lister" v-show="datas.drawType != 3">
            <div class="listTitle">单笔代付</div>
            <div class="listCont">
              <el-input
                maxlength="6"
                @input="
                  (value) => {
                    datas.drawFee = value.replace(
                      /^\D*(\d*(?:\.\d{0,2})?).*$/g,
                      '$1'
                    );
                  }
                "
                :disabled="catBool"
                v-model="datas.drawFee"
                placeholder="请输入"
              ></el-input
              >&nbsp;&nbsp;元
            </div>
          </div>
          <div class="lister" v-show="datas.drawType != 3">
            <div class="listTitle">代付费率</div>
            <div class="listCont">
              <el-input
                maxlength="6"
                @input="
                  (value) => {
                    datas.drawRate = value.replace(
                      /^\D*(\d*(?:\.\d{0,3})?).*$/g,
                      '$1'
                    );
                  }
                "
                :disabled="catBool"
                v-model="datas.drawRate"
                placeholder="请输入"
              ></el-input
              >&nbsp;&nbsp;%
            </div>
          </div>
          <!-- <div class="lister" v-show="datas.drawType != 3">
            <div class="listTitle">单笔封顶手续费</div>
            <div class="listCont">
              <el-input
                :disabled="catBool"
                maxlength="6"
                @input="
                  (value) => {
                    datas.singleMax = value.replace(
                      /^\D*(\d*(?:\.\d{0,2})?).*$/g,
                      '$1'
                    );
                  }
                "
                v-model="datas.singleMax"
                placeholder="请输入"
              ></el-input
              >&nbsp;&nbsp;元
            </div>
          </div>
          <div class="lister" v-show="datas.drawType != 3">
            <div class="listTitle">单笔最低手续费</div>
            <div class="listCont">
              <el-input
                maxlength="10"
                :disabled="catBool"
                @input="
                  (value) => {
                    datas.singleMin = value.replace(
                      /^\D*(\d*(?:\.\d{0,2})?).*$/g,
                      '$1'
                    );
                  }
                "
                v-model="datas.singleMin"
                placeholder="请输入"
              ></el-input
              >&nbsp;&nbsp;元
            </div>
          </div>
          <div class="lister" v-show="datas.drawType != 3">
            <div class="listTitle">单笔最高费率</div>
            <div class="listCont">
              <el-input
                maxlength="6"
                @input="
                  (value) => {
                    datas.maxRate = value.replace(
                      /^\D*(\d*(?:\.\d{0,3})?).*$/g,
                      '$1'
                    );
                  }
                "
                :disabled="catBool"
                v-model="datas.maxRate"
                placeholder="请输入"
              ></el-input
              >&nbsp;&nbsp;%
            </div>
          </div> -->
          <div class="lister">
            <div class="listTitle">是否开通</div>
            <div class="listCont">
              <el-select
                v-model="datas.isFlag"
                placeholder="请选择"
                :disabled="catBool"
              >
                <el-option label="开启" value="0"></el-option>
                <el-option label="关闭" value="1"></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <!-- 海科代付 -->
      <div v-else style="margin-left:14px">
        <div style="display: flex; margin-bottom: 20px">
          <div class="publicTitle">对公</div>
          <div class="privateTitle">对私</div>
        </div>
        <div class="daifu">
          <div class="public">
            <div class="lister">
              <div class="listTitle">单笔手续费</div>
              <div class="listCont">
                <el-input
                  :disabled="catBool"
                   @input="value=>{datas1.pubAccType.drawFee=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
                  v-model="datas1.pubAccType.drawFee"
                  class="payment"
                  placeholder="请输入"
                ></el-input>
                元
              </div>
            </div>
          </div>
          <div class="private">
            <el-input
              :disabled="catBool"
              @input="value=>{datas1.priAccType.drawFee=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
              v-model="datas1.priAccType.drawFee"
              class="payment"
              placeholder="请输入"
            ></el-input>
            元
          </div>
        </div>
        <div class="daifu">
          <div class="public">
            <div class="lister">
              <div class="listTitle">单笔提现费率</div>
              <div class="listCont">
                <el-input
                  :disabled="catBool"
                  @input="value=>{datas1.pubAccType.taxRate=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')}"
                  v-model="datas1.pubAccType.taxRate"
                  class="payment"
                  placeholder="请输入"
                ></el-input>
                %
              </div>
            </div>
          </div>
          <div class="private">
            <el-input
                  :disabled="catBool"
                  @input="value=>{datas1.priAccType.taxRate=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')}"
                  v-model="datas1.priAccType.taxRate"
                  class="payment"
                  placeholder="请输入"
                ></el-input>
                %
          </div>
        </div>
        <div class="daifu">
          <div class="public">
            <div class="lister">
              <div class="listTitle">单笔无票税率</div>
              <div class="listCont">
                <el-input
                  :disabled="catBool"
                  @input="value=>{datas1.pubAccType.drawRate=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')}"
                  v-model="datas1.pubAccType.drawRate"
                  class="payment"
                  placeholder="请输入"
                ></el-input>
                %
              </div>
            </div>
          </div>
          <div class="private">
            <el-input
              :disabled="catBool"
              @input="value=>{datas1.priAccType.drawRate=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')}"
              v-model="datas1.priAccType.drawRate"
              class="payment"
              placeholder="请输入"
            ></el-input>
            %
          </div>
        </div>
        
        <div class="daifu">
          <div class="public">
            <div class="lister">
              <div class="listTitle">单笔最低提现金额</div>
              <div class="listCont">
                <el-input
                  :disabled="catBool"
                  @input="value=>{datas1.pubAccType.singleMinAmt=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
                  v-model="datas1.pubAccType.singleMinAmt"
                  class="payment"
                  placeholder="请输入"
                ></el-input>
                元
              </div>
            </div>
          </div>
          <div class="private">
            <el-input
              :disabled="catBool"
              @input="value=>{datas1.priAccType.singleMinAmt=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
              v-model="datas1.priAccType.singleMinAmt"
              class="payment"
              placeholder="请输入"
            ></el-input>
            元
          </div>
        </div>
        <div class="daifu">
          <div class="public">
            <div class="lister">
              <div class="listTitle">单笔最高提现金额</div>
              <div class="listCont">
                <el-input
                  :disabled="catBool"
                  @input="value=>{datas1.pubAccType.singleMaxAmt=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
                  v-model="datas1.pubAccType.singleMaxAmt"
                  class="payment"
                  placeholder="请输入"
                ></el-input>
                元
              </div>
            </div>
          </div>
          <div class="private">
            <el-input
              :disabled="catBool"
              @input="value=>{datas1.priAccType.singleMaxAmt=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
              v-model="datas1.priAccType.singleMaxAmt"
              class="payment"
              placeholder="请输入"
            ></el-input>
            元
          </div>
        </div>
        <div class="daifu">
          <div class="public">
            <div class="lister">
              <div class="listTitle">单日封顶提现金额</div>
              <div class="listCont">
                <el-input
                  :disabled="catBool"
                  @input="value=>{datas1.pubAccType.dayAmt=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
                  v-model="datas1.pubAccType.dayAmt"
                  class="payment"
                  placeholder="请输入"
                ></el-input>
                元
              </div>
            </div>
          </div>
          <div class="private">
            <el-input
              :disabled="catBool"
              @input="value=>{datas1.priAccType.dayAmt=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
              v-model="datas1.priAccType.dayAmt"
              class="payment"
              placeholder="请输入"
            ></el-input>
            元
          </div>
        </div>
        <div class="daifu">
          <div class="public">
            <div class="lister">
              <div class="listTitle">单日最大提现次数</div>
              <div class="listCont">
                <el-input
                  :disabled="catBool"
                  @input="value=>{datas1.pubAccType.dayMaxCnt=value.replace(/[^\d]+/g,'')}"
                  v-model="datas1.pubAccType.dayMaxCnt"
                  class="payment"
                  placeholder="请输入"
                ></el-input>
                次
              </div>
            </div>
          </div>
          <div class="private">
            <el-input
              :disabled="catBool"
              @input="value=>{datas1.priAccType.dayMaxCnt=value.replace(/[^\d]+/g,'')}"
              v-model="datas1.priAccType.dayMaxCnt"
              class="payment"
              placeholder="请输入"
            ></el-input>
            次
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitA">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      no: "12458",
      loginName: "",
      tableData: [],
      checkedAll: false,
      currentPage: 1, //默认显示第一页
      pageSize: 10, //默认每页显示10条
      totalNum: 0, //总页数
      catBool: false, //点击查看禁用所有
      datas: {
        drawType: "2", //提现类型
        drawFee: "", //提现手续费
        singleMax: "", //
        singleMin: "", //
        maxRate: "",
        drawRate: "", //提现手续费率
        isFlag: "0", //是否开通
      },
      // 是否点击了修改
      setData: "",
      // 代付单独传递的
      datas1: {
        pubAccType: {
          oemUid: "",
          drawFee: "", //单笔代付
          drawRate: "", //单笔无票税率
          taxRate: "", //单笔有票税率
          singleMinAmt: "", //单笔最低提现金额
          singleMaxAmt: "", //单笔最高提现金额
          dayAmt: "", //单日最高提现金额
          dayMaxCnt: "", //单日最大提现次数
        },
        priAccType: {
          oemUid: "",
          drawFee: "", //单笔代付
          drawRate: "", //单笔无票税率
          taxRate:"",//单笔提现费率
          singleMinAmt: "", //单笔最低提现金额
          singleMaxAmt: "", //单笔最高提现金额
          dayAmt: "", //单日最高提现金额
          dayMaxCnt: "", //单日最大提现次数
        },
      },
      dataOptions: [],
      form: {
        officeUid: "",
        officeName: "",
        parentName: "",
        agtType: "",
        page: 1,
        number: 10,
      },
      oemUid: null,
      total: null,
      multipleSelection: [],
      officeUid: null,
      type: "",
      dialogVisible: false,
      infos1:""
    };
  },
  created() {
    this.type = localStorage.getItem("jurisdiction");
    this.loginName = localStorage.getItem("username");
    let infos = this.$route.query.businessInfo;
    let infos1 = JSON.parse(infos);
    this.infos1 = JSON.parse(infos);
    // console.log(info)
    this.form.officeUid = infos1.uid;
    this.datas.officeUid = infos1.uid;
    this.officeUid = infos1.uid;
    // alert(this.form.officeUid)
    this.form.officeName = infos1.name;
    this.form.parentName = infos1.parentName;
    this.oemUid = infos1.oemUid;
    this.datas1.pubAccType.oemUid = infos1.uid;
    this.datas1.priAccType.oemUid = infos1.uid;
    
    // alert(infos1.oemUid)
    if (infos1.agtType == "普通代理") this.form.agtType = 1;
    else this.form.agtType = 0;
    console.log("下面是表格里面的数据");
    console.log(this.form);
    // return
    this.getData();
    this.getSelect();
  },
  methods: {
    // 获取下拉
    getSelect() {
      axios
        .post("/api/office/queryOemDrawTypeList", {})
        .then((res) => {
          console.log("下拉");
          console.log(res);
          this.dataOptions = res.data.oemDrawTypeList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加
    submitA() {
      // alert(this.datas.officeUid)
      console.log(this.datas1);
      console.log(this.datas);
      let requestUrl = "";
      // 判断datas里面有没有id
      // 没有的是新增
      console.log(this.datas);
      // 有是修改
      if (this.datas.drawType == "1") {
        //海科代付添加
        if(
          this.datas1.pubAccType.oemUid==""||this.datas1.pubAccType.drawFee=="" ||
          this.datas1.pubAccType.drawRate==""||this.datas1.pubAccType.taxRate=="" ||
          this.datas1.pubAccType.singleMinAmt==""||this.datas1.pubAccType.singleMaxAmt=="" ||
          this.datas1.pubAccType.dayAmt=="" ||this.datas1.pubAccType.dayMaxCnt==""||
          
          this.datas1.priAccType.oemUid==""||this.datas1.priAccType.drawFee=="" ||
          this.datas1.priAccType.drawRate==""||
          this.datas1.priAccType.singleMinAmt==""||this.datas1.priAccType.singleMaxAmt=="" ||
          this.datas1.priAccType.dayAmt=="" ||this.datas1.priAccType.dayMaxCnt==""
          ){
            layer.open({
              content: "数据全为必填项",
              skin: "msg",
              time: 1 //1秒后自动关闭
            });
            return
        }
        

        if (this.setData == "") {
          requestUrl = "api/office/addOemPayDrawType";
          axios
            .post(requestUrl, this.datas1)
            .then((res) => {
              console.log(res);
              if (res.data.code == "0000") {
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 1, //1秒后自动关闭
                });
                this.getData()
                this.dialogVisible = false;
              } else {
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 1, //1秒后自动关闭
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else if (this.setData == "001") {
          requestUrl = "api/office/updatePayOemDrawType";
          this.datas1.priAccType.createDate = undefined;
          this.datas1.priAccType.updateDate = undefined;
          this.datas1.pubAccType.createDate = undefined;
          this.datas1.pubAccType.updateDate = undefined;
          axios
            .post(requestUrl, this.datas1)
            .then((res) => {
              console.log(res);
              if(res.data.code=="0000"){
                this.dialogVisible = false;
                this.getData()
              }else{
                layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1 //1秒后自动关闭
            });

              }
            })
            .catch((err) => {
              console.log(err);
            });
        }

        // 海科代付修改
      } else {
        if (this.datas.id) {
          console.log("修改");
          requestUrl = "/api/office/updateOemDrawType";
        } else {
          console.log("添加");
          requestUrl = "/api/office/addOemDrawType";
        }
      }

      if (this.datas.drawType == 3) {
        axios
          .post(requestUrl, this.datas)
          .then((res) => {
            console.log(res);
            this.getData();
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
            this.dialogVisible = false;
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (this.datas.drawType == 2) {
        if (
          this.datas.drawRate != "" &&
          this.datas.drawFee != "" &&
          this.datas.isFlag != ""
        ) {
          axios
            .post(requestUrl, this.datas)
            .then((res) => {
              console.log(res);
              this.getData();
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 1, //1秒后自动关闭
              });
              this.dialogVisible = false;
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          layer.open({
            content: "输入全是必填",
            skin: "msg",
            time: 1, //1秒后自动关闭
          });
        }
      }
    },
    //修改接口

    //获取列表数据
    getData() {
      axios
        .post("/api/office/queryOemDrawCfgList", { officeUid: this.officeUid })
        .then((res) => {
          // alert("成功")
          console.log("下面是列表数据");
          console.log(res);
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击查看或者修改的回显  拿列表的id
    handleEdit(val, type) {
      if (type == 1024) {
        this.catBool = true;
      } else {
        this.catBool = false;
      }
      this.dialogVisible = true;
      console.log(val);
      let url = "";
      if (val.drawType == 1) {
        this.datas.drawType = "1";
        this.setData = "001";
        url = "api/office/queryUpdatePayOemDrawType";
      } else {
        url = "/api/office/queryUpdateOemDrawType";
      }
      axios
        .post(url, { id: val.id, oemUid: this.infos1.uid })
        .then((res) => {
          console.log("回显的数据");
          console.log(res);
          if (val.drawType == 1) {
            this.datas1 = res.data.data;
          } else {
            this.datas = res.data.data;
          }
          // 赋值到data
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 开通业务
    opening() {
      (this.datas = {
        drawType: "2", //提现类型
        drawFee: "", //单笔代付
        singleMax: "", //单笔封顶手续费
        singleMin: "", //单笔最低续费
        maxRate: "", //单笔最高费率
        drawRate: "", //代付费率
        isFlag: "0", //是否开通
        officeUid: this.officeUid,
      }),



      this.datas1 = {
        pubAccType: {
          oemUid: "",
          drawFee: "", //单笔代付
          drawRate: "", //单笔无票税率
          taxRate: "", //单笔有票税率
          singleMinAmt: "", //单笔最低提现金额
          singleMaxAmt: "", //单笔最高提现金额
          dayAmt: "", //单日最高提现金额
          dayMaxCnt: "", //单日最大提现次数
        },
        priAccType: {
          oemUid: "",
          drawFee: "", //单笔代付
          drawRate: "", //单笔无票税率
          singleMinAmt: "", //单笔最低提现金额
          singleMaxAmt: "", //单笔最高提现金额
          dayAmt: "", //单日最高提现金额
          dayMaxCnt: "", //单日最大提现次数
        },
      },
      this.datas1.pubAccType.oemUid = this.infos1.uid
      this.datas1.priAccType.oemUid = this.infos1.uid
      this.catBool = false;
      this.dialogVisible = true;

      return;
      // var info = this.$route.query.
      //  return
      var that = this;
      this.$router.push({
        path: "/homePage/openingBusiness",
        query: {
          info: that.form.agtType,
          officeUid: that.form.officeUid,
          oemUid: that.oemUid,
          agtType: that.form.agtType,
        },
      });
    },
    handleSizeChange(val) {
      console.log(val);
      this.form.number = val; //动态改变
    },
    handleCurrentChange(val) {
      console.log(val);
      this.form.page = val; //动态改变
      this.getData();
    },
    // 支持银行
    bank(val) {
      console.log(val);
      //通道编号
      let channelNo = val.channelNo;
      //通道名称
      let channelName = val.channelName;
      //机构类型
      // return
      this.$router.push({
        path: "bankList",
        query: {
          businessInfo: JSON.stringify(this.infos1),
          channelNo: channelNo,
          channelName: channelName,
          officeUid: this.form.officeUid,
          oemUid: this.oemUid,
          agtType: this.form.agtType,
        },
      });
    },
    handleEdits(data, dataId, dataName) {
      console.log(data);

      let channCode = data.channelNo;
      let channelName = data.channelName; //名字
      let status = data.status;
      let id = data.id;
      // let officeUid = this.$route.query.uid
      // alert(officeUid)
      // return
      var that = this;
      this.$router.push({
        path: "/homePage/openingBusiness",
        query: {
          edit: 1,
          agType: that.form.agtType,
          channCode: channCode,
          officeUid: that.form.officeUid,
          id: id,
          channelName: channelName,
          type: "23",
        },
      });
    },

    pageChange(val) {
      console.log(val);
    },

    //下载模块
    handleSelectionChange(val) {
      console.log("选中");
      console.log(val);
      this.multipleSelection = val;
    },
    back() {
      this.$router.push("/homePage/mechanismaa");
    },
    handleDownload() {
      if (this.multipleSelection.length) {
        // this.downloadLoading = true
        import("@/vendor/Export2Excel").then((excel) => {
          const tHeader = ["Id", "名字", "编号", "限额"];
          // const data=this.tableData
          const filterVal = ["id", "channelName", "channelNo", "cntCtl"];
          const list = this.multipleSelection;
          const data = this.formatJson(filterVal, list);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: "文件",
            autoWidth: true,
            bookType: "xls",
          });
          // this.$refs.multipleTable.clearSelection()
          // this.downloadLoading = false
        });
      } else {
        this.$message({
          message: "Please select at least one item",
          type: "warning",
        });
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>
<style scoped>
.con {
  position: relative;
  /* padding: 20px; */
  /* display: flex;
    flex-direction: column */
}
.contbox6_10 {
  width: 100%;
  /* min-height: 10px !important;
  margin-left: 2%;
  height: 80px; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.nav {
  width: calc(100% - 40px);
  margin-top: 5px;
  background: #f9fafc;
  padding-left: 20px;
  /* height: 200px; */
  /* border: 1px #000 solid; */
}
.nav_son {
  width: 100%;
}
.nav_son span {
  display: inline-block;
  width: 311px;
  margin-right: 20px;
  color: #000;
}
.tables {
  width: 100%;
  float: left;
}
.buttons {
  margin-top: 10px;
}
.content {
  width: calc(100% - 40px);
  height: 70vh;
}
.lister {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
.listTitle {
  width: 140px;
  text-align: right;
  margin-right: 10px;
}
.kaitong {
  padding: 10px;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: none !important;
}
.public > .lister > .listTitle {
  width: 120px;
}
/deep/ .payment {
  width: 100px;
}
/deep/ .payment .el-input__inner {
  width: 100%;
}
.daifu {
  display: flex;
}
.public {
  margin-right: 20px;
}
.publicTitle {
  width: 200px;
  text-align: right;
}
.privateTitle {
  width: 130px;
  text-align: right;
}
</style>
